<template>
	<view class="winning-record-list">
		<view v-if="giftDetail.gift_goods" class="winning-record-item">
			<view v-if="giftDetail.gift_goods.is_virtual != 1" class="winning-record-info" @click="selectAddress">
				<view v-if="!addressDefault.id">新增收货地址</view>
				<view v-else>
					<view class="info-name">
						<text class="info-tit ns-font-size-base">收货人信息：</text>
						<text class="info-con ns-font-size-base">{{ addressDefault.consigner }}</text>
						<text class="info-phone ns-font-size-base">{{ addressDefault.mobile }}</text>
					</view>
					<view class="info-address">
						<text class="info-tit">收货地址：</text>
						<text class="info-con">{{ addressDefault.address_info }} - {{ addressDefault.address }}</text>
					</view>
				</view>
			</view>
			<view class="winning-record-body">
				<navigator :url="'/pages/goods/detail/detail?goods_id=' + giftDetail.gift_goods.goods_id" class="body-pic">
					<image :src="$util.img(pic_cover_small)" mode="aspectFill"></image>
				</navigator>
				<view class="body-con">
					<text class="tit">{{ giftDetail.gift_goods.goods_name }}</text>
					<view class="desc">
						<text class="price-name">价格：</text>
						<text class="price">{{ giftDetail.gift_goods.price }}</text>
						<text v-if="giftDetail.gift_goods.sku_name" style="margin-left: auto;" class="price">{{ giftDetail.gift_goods.sku_name }}</text>
						<text class="num">x 1</text>
					</view>
				</view>
			</view>
		</view>
		<view class="winning-record-write">
			<view v-if="giftDetail.gift_goods && giftDetail.gift_goods.is_virtual == 1" class="phone">
				<text class="tit">手机号：</text>
				<input class="con uni-input" type="number" placeholder="请输入手机号" maxlength="11" v-model="mobile" />
			</view>
			<view class="user-response">
				<text class="tit">买家留言：</text>
				<textarea class="con ns-font-size-base" value="" placeholder="给卖家留言" maxlength="100" v-model="textarea" />
			</view>
		</view>
		<button class="receive" type="primary" @click="receive">立即领取</button>
		<loading-cover ref="loadingCover"></loading-cover>
	</view>
</template>

<script>
import http from 'common/js/http.js';
import loadingCover from '@/components/loading/loading.vue';
export default {
	components: {
		loadingCover
	},
	data() {
		return {
			gift_id: '',
			record_id: '',
			giftDetail: {}, //赠品信息
			addressDefault: '', //地址信息
			mobile: '',
			textarea: '',
			is_sub: false,
			pic_cover_small: ''
		};
	},
	onLoad(event) {
		this.record_id = event.record_id;
		this.gift_id = event.gift_id;
	},
	onShow() {
		this.initReceivePrize();
		this.initAddress();
	},
	mixins: [http],
	methods: {
		/* 初始化赠品信息 */
		initReceivePrize() {
			this.sendRequest({
				url: 'System.Promotion.promotionGiftDetail',
				data: { id: this.gift_id },
				success: res => {
					if (res.code == 0) {
						this.giftDetail = res.data;
						this.pic_cover_small = res.data.gift_goods.picture_info.pic_cover_small;
						if (this.$refs.loadingCover == undefined) return;
						this.$refs.loadingCover.hide();
					}
				}
			});
		},
		/* 初始化地址信息 */
		initAddress() {
			this.sendRequest({
				url: 'System.Member.defaultAddress',
				success: res => {
					if (res.code == 0) {
						this.addressDefault = res.data;
						this.addressDefault.address_info = this.addressDefault.address_info.split('&nbsp;').join(' ');
					}
				}
			});
		},
		/* 领取奖品 */
		receive() {
			var isVirtual = this.giftDetail.gift_goods.is_virtual;
			if (isVirtual == undefined) return;

			if (isVirtual == 1) {
				/* 判断手机号 */
				this.vertify();
			} else if (isVirtual == 0) {
				if (this.addressDefault.id == undefined || this.addressDefault.id == '') {
					this.$util.showToast({
						title: '请选择地址信息'
					});
				}
			}

			if (this.is_sub) return;
			this.is_sub = true;

			this.sendRequest({
				url: 'System.Member.achieveGift',
				data: {
					record_id: this.record_id,
					buyer_message: this.textarea
				},
				success: res => {
					var data = res.data;
					if (data['code'] == 1) {
						this.$util.showToast({
							title: data['message']
						});
						this.$util.redirectTo('/pages/member/winning/winning', {}, '', 'redirectTo');
					} else {
						this.$util.showToast({
							title: data['message']
						});
						this.is_sub = false;
					}
				}
			});
		},
		vertify() {
			var rule = [{ name: 'mobile', checkType: 'required', errorMsg: '请输入手机号' }, { name: 'mobile', checkType: 'phoneno', errorMsg: '请输入正确的手机号' }];
			var checkRes = validate.check(this.mobile, rule);
			if (checkRes) {
				return true;
			} else {
				this.$util.showToast({ title: validate.error });
				return false;
			}
		},
		selectAddress(){
			this.$util.redirectTo('/pages/member/address/address', {back: encodeURIComponent('/pages/member/receive_prize/receive_prize?gift_id=' + this.gift_id + '&record_id=' + this.record_id)});
		}
	}
};
</script>

<style lang="scss">
page {
	overflow: hidden;
}
.winning-record-item {
	margin: 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
	.winning-record-body {
		display: flex;
		padding: 30rpx;
		.body-pic {
			margin-right: 30rpx;
			width: 160rpx;
			height: 160rpx;
			image {
				width: 160rpx;
				height: 160rpx;
			}
		}
		.body-con {
			.tit {
				margin-bottom: 10rpx;
				font-size: $ns-font-size-base;
				line-height: 1.5;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.desc {
				display: flex;
				justify-content: space-between;
				font-size: $ns-font-size-base;
				.price-name {
					color: $ns-text-color-gray;
				}
				.price {
					margin-right: auto;
					text-decoration: line-through;
				}
			}
		}
	}
	.winning-record-info {
		padding: 16rpx 30rpx;
		border-bottom: 2rpx solid $ns-border-color-gray;
		.info-name {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 50rpx;
			font-size: $ns-font-size-base;
		}
		.info-address {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			min-height: 50rpx;
			font-size: $ns-font-size-base;
			.info-con {
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
				line-height: 1.5;
			}
		}
		.info-tit {
			min-width: 170rpx;
			color: $ns-text-color-gray;
		}
		.info-con {
			margin-right: auto;
		}
	}
}
.winning-record-write {
	margin: 30rpx;
	padding: 30rpx;
	background-color: #fff;
	border-radius: 16rpx;
	> view {
		display: flex;
		justify-content: space-between;
		align-items: end;
		.tit {
			width: 200rpx;
			font-size: $ns-font-size-base;
		}
		.con {
			flex: 1;
			padding: 0;
		}
	}
	.phone {
		margin-bottom: 20rpx;
	}
}
.receive {
	position: fixed;
	bottom: 40rpx;
	left: 30rpx;
	right: 30rpx;
	box-shadow: 2rpx 4rpx 10rpx rgba(0, 0, 0, 0.3);
}
</style>
